import React, { Component } from 'react';
import './index.css'
import NavBar from '../../components/NavBar';
import axios from 'axios'
import { NoticeBar, WhiteSpace } from 'antd-mobile';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as deleBook from "../../store/actionCreators";
class Bookshelf extends Component {
  constructor(props){
    super(props)
      this.state = {
            booksehlesTop:[],
            flag:false,
            bookList:[]
        }
  }

  render() {
    const { booksehlesTop ,flag} = this.state
    
    return (
      <div className="bookshelf-container">
          {
              booksehlesTop.map((item,index)=>{
                  return(
                      <div className="bookshelf-article" key={index}>
                              <div className="article-top">
                                  <li>
                                      <img src={item.cover_url} alt="" />
                                  </li>
                                  <li>
                                    
                                      <span className="article-top-li-span">
                                              {item.description}
                                      </span>
                                  </li>
                                  <li>
                                      <i className="iconfont icon-arrow-right"></i>
                                  </li>
                              </div>
                              <div className="article-bottom">
                                    <WhiteSpace size="lg" />
                                    <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }} style={{background:'#fff'}}>
                                    创别书城倾城为您推荐一下精彩小说:    绝世神剑,  超级狂医 , 追凶鬼探 ,无上神王
                                    </NoticeBar>
                              </div>
                          </div>
                  )
              })
          }

        <div className="bookshelf-list">
                    <div className="editBox">
                        <button className="editbook" onClick={this.editBook}>编辑</button>
                    </div>
                    {
                        this.props.list &&  this.props.list.map((item,index) =>{
                            return (
                                <div className="listItem" key={item.book_id}>
                                    <div className="listItem-left">
                                        <img src={item.cover_url} alt="" />
                                    </div>
                                    <div className="listItem-center">
                                        <p >
                                            {item.book_name}
                                        </p>
                                        <p>{item.author_name} | 书{item.cname}</p>
                                        <p>
                                            {item.last_update_chapter_name}
                                        </p>
                                    </div>
                                    <div className="listItem-right">
                                        <button style={flag == true ? {display:'block'}: {display:'none'} }
                                            onClick={this.delItem(index)}
                                            >删除</button>
                                    </div>  
                                </div>
                            )
                        })
                    }

               
        </div>
        <div className="sctop" style={{height:'1rem'}}></div>
     <NavBar/>
  </div>      
    );
  }

  componentDidMount(){
    this.getBooksehlesData()

  }

  editBook = () =>{
      const { flag } = this.state
      this.setState({flag:!flag})
  }

  delItem = (index) =>{
      return () =>{
            this.props.deleBook(index)
      }
  }


  async getBooksehlesData(){
      await axios({
          method:'GET',
          url:`https://wxapi.chuangbie.com/wap/index/index_recommend_v0722.html`,
            
      }).then(res =>{
          let data1 = res.data.data.xinshu.slice(0,1)

          this.setState({booksehlesTop:data1,})
      })
  }
}

function mapStateToProps(state) {
  
  return {
    list: state.book,
  }
}
function mapDispatchToProps(dispatch) {
    return {
      ...bindActionCreators(deleBook, dispatch)
    }
 }
export default connect(mapStateToProps,mapDispatchToProps)(Bookshelf);